<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeakMap开发选课组件</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            padding-top: 200px;
        }

        #count{
            width: 300px;
            height: 190px;
            margin-left: 20px;
            box-sizing: border-box;
            border: 1px solid #ddd;
        }

        ul{
            list-style: none;
            display: flex;
            flex-direction: column;
        }

        li{
            width: 200px;
            height: 50px;
            border:2px solid orange;
            box-sizing: border-box;
            padding: 10px 20px;
            position: relative;
            margin-bottom: 20px;
        }

        li>a{
            width: 30px;
            height: 30px;
            background: green;
            color: white;
            position: absolute;
            top:10px;
            right: 10px;
            text-decoration: none;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <ul>
        <li><span>html</span><a href="javascript:void(0);">+</a></li>
        <li><span>css</span><a href="javascript:void(0);">+</a></li>
        <li><span>js</span><a href="javascript:void(0);">+</a></li>
    </ul>
    <div>
        <strong id="count">共选择了0门课</strong>
        <p id="lists"></p>
    </div>
    <script>
        class lesson{
            constructor(){
                this.lis = document.querySelectorAll("li");
                this.countElement = document.getElementById("count");
                this.listsElement = document.getElementById("lists");
                this.weakmap = new WeakMap();
            }
            run(){
                this.lis.forEach(item => {
                    item.querySelector("a").addEventListener("click",event => {
                        const status = item.getAttribute("select");
                        if(status){
                            this.weakmap.delete(item);
                            item.removeAttribute("select");
                            item.querySelector("a").style.backgroundColor = "green";
                            item.querySelector("a").innerHTML = "+";
                        }else{
                            this.weakmap.set(item);
                            item.setAttribute("select",true)
                            item.querySelector("a").style.backgroundColor = "#ccc";
                            item.querySelector("a").innerHTML = "-";
                        };
                        console.log(this.lis);
                        console.log(this.weakmap);
                        this.show();
                    })
                })
            }
            count(){
                return [...this.lis].reduce((count,present) => {
                    count += (this.weakmap.has(present)) ? 1 : 0;
                    return count;
                },0);
            }
            lists(){
                return  [...this.lis].filter(item => {
                    return this.weakmap.has(item);
                }).map(element => {
                    return `<span>${element.querySelector("span").innerHTML}</span>`
                }).join("-");
            }
            show(){
                this.countElement.innerHTML = `共选择了${this.count()}门课`;
                this.listsElement.innerHTML = this.lists();
            }
        }
        new lesson().run();
    </script>
</body>
</html>